<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>打叉动画（原理同打勾）</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      flex-direction: column;
    }

    h2 {
      font-family: Helvetica;
      font-size: 36px;
      margin-top: 40px;
      color: #333;
      opacity: 0;
    }

    .circle {
      /* dasharray设置为圆的周长就可以把圆隐藏起来 */
      stroke-dasharray: 1194;
      /* dashoffset从周长变成0 ，就是一个圆从无到有的过程 */
      stroke-dashoffset: 1194;
    }

    /* 打叉的两笔可以做成一个动画，也可以做成两个动画 */
    .line1 {
      stroke-dasharray: 240;
      stroke-dashoffset: 240;
    }

    .line2 {
      stroke-dasharray: 240;
      stroke-dashoffset: 240;
    }

    @keyframes circle {
      from {
        stroke-dashoffset: 1194;
      }

      to {
        stroke-dashoffset: 2388;
      }
    }

    @keyframes line1 {
      from {
        stroke-dashoffset: 240;
      }

      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes line2 {
      from {
        stroke-dashoffset: 240;
      }

      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes title {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);

      }
    }

    input[type='checkbox']:checked+svg .circle {
      animation: circle 1s ease-in-out;
      /* 动画结束之后保持，并不再执行动画 */
      animation-fill-mode: forwards
    }

    input[type='checkbox']:checked+svg .line1 {
      animation: line1 1s ease-in-out;
      /* 动画结束之后保持，并不再执行动画 */
      animation-fill-mode: forwards;
      animation-delay: 0.95s
    }

    input[type='checkbox']:checked+svg .line2 {
      animation: line2 1s ease-in-out;
      /* 动画结束之后保持，并不再执行动画 */
      animation-fill-mode: forwards;
      animation-delay: 1.9s
    }

    input[type='checkbox']:checked~h2 {
      animation: title 1s ease-in-out;
      /* 动画结束之后保持，并不再执行动画 */
      animation-fill-mode: forwards;
      animation-delay: 1.9s
    }
  </style>
</head>

<body>
  <input type="checkbox">
  <svg width="400" height="400">
    <circle fill="none" stroke="#FF5050" stroke-width='20' cx='200' cy='200' r='190' class='circle'
      stroke-linecap='round'>
    </circle>

    <polyline fill='none' stroke="#FF5050" stroke-width='24' points="115,115 285,258" stroke-linecap="round"
      stroke-linejoin='round' class="line1"></polyline>

    <polyline fill='none' stroke="#FF5050" stroke-width='24' points="285,115 115,258" stroke-linecap="round"
      stroke-linejoin='round' class="line2"></polyline>
  </svg>

  <h2 class="title">Payment Fail</h2>
</body>

</html>